<template>
  <div class="search">
    <el-input class="input" v-model="this.queryParams.id" placeholder="根据ID查找" />
    <el-input class="input" v-model="this.queryParams.username" placeholder="根据用户名查找" />
    <el-input class="input" v-model="this.queryParams.phone" placeholder="根据手机号查找" />
    <el-button class="button" type="primary" @click="search">查找</el-button>
    <el-button class="button" type="danger" @click="cleanInput">清空</el-button>
  </div>
  <div>
    <el-table :data="this.userList">
      <el-table-column label="头像">
        <template #default="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.avatarUrl"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="用户id" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="name" label="昵称" />
      <el-table-column label="性别">
        <template v-slot="scope">
          {{ scope.row.gender === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column label="注册时间">
        <template v-slot="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button @click="deleteItem(scope.row)" link type="danger" size="large">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pager">
    <el-pagination
        :default-page-size="this.queryParams.size"
        v-model:current-page="queryParams.page"
        background layout="prev, pager, next"
        :total="this.count"
        @current-change="queryUserByPage"
    />
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserPage",
  data(){
    return{
      userList :[],
      count:0,
      queryParams : {
        id : '',
        username : '',
        phone : '',
        size : 4,
        page : 1,
      }
    }
  },
  methods:{
    queryUserByPage(){
      axios.post('http://localhost:8088/query/user/page', this.queryParams, {withCredentials:true})
          .then(res => {
            this.userList = res.data.data
          })

    },
    queryUserCountByPage(){
      axios.post('http://localhost:8088/query/user/count', this.queryParams, {withCredentials:true})
          .then(res => {
            this.count = res.data.data
          })

    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    search(){
      this.queryParams.page = 1;
      this.queryUserByPage();
      this.queryUserCountByPage();
    },
    cleanInput(){
      this.queryParams.id = '';
      this.queryParams.username = '';
      this.queryParams.phone = '';
    },
    deleteItem(user){
      axios.delete('http://localhost:8088/user/delete/'+user.id,{withCredentials:true})
          .then(res =>{
            if (res.data.code === 200){
              let index = this.userList.indexOf(user);
              this.userList.splice(index,1)
              ElMessage.success('删除成功！')
            }else {
              ElMessage.error('删除失败！')
            }
          })
    }
  },
  mounted() {
    this.queryUserByPage();
    this.queryUserCountByPage();
  }
}
</script>

<style scoped>
.input{
  width: 240px;
  margin-right: 20px;
}
.button{
  vertical-align: bottom;
}
.pager{
  margin: 50px auto;
}
.search{
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>